{% load static %}
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>登录</title>
<link rel="stylesheet" type="text/css" href="../static/css/index.css" />
    <style>
        span{
            position: absolute;
            top: 94px;
            right: 224px;
            color: red;
        }
    </style>
</head>

<body>

<img class="bgone" src="../static/img/1.jpg" />
<img class="pic" src="../static/img/a.png" />

<div class="table">
	<div class="wel">PMS后台管理系统</div>
	<div class="wel1">PMS &nbsp; HOU &nbsp; TAI &nbsp; GUAN &nbsp; LI &nbsp; XI &nbsp; TONG</div>
    <span></span>
	<div class="user">
		<div id="yonghu" style=""><img src="../static/img/yhm.png" /></div>
		<input class="user-pwd" id="user_id" type="text" name="username" placeholder="用户名" />
	</div>			
	<div class="password">
		<div id="yonghu"><img src="../static/img/mm.png" /></div>
		<input class="user-pwd" id="pwd_id" type="password" name="pwd" placeholder="●●●●●●"/>
	</div>
	<input class="btn" type="button" name="登录" value="登录" />
</div>
    <script src="{% static 'plugins/jquery-3.4.1.js' %}"></script>
    <script>
        $('.btn').click(function () {
            $.ajax({
                url: "{% url 'mac_login'%}",
                type: 'POST',
                data: {'username': $('#user_id').val(), 'pwd': $('#pwd_id').val()},
                dataType: 'JSON',
                success: function (res) {
                    if (res.status) {
                        window.location.replace("{% url 'mac_home'%}");
                    }else {
                         $('span').text('用户名或密码错误,请重新输入')
                    }
                }
            })
        })
        $('.user-pwd').focus(function () {
            $('span').text('')
        })
    </script>
</body>
</html>